<template>
    <div class="tag-list-container">
        <!-- 主标签列表 -->
        <div class="tag-list-box">
            <div v-for="(tag, index) in tagList" :key="index" class="tag-item"
                :class="{ active: activeIndex === index }" @click="handleTagClick(index)">
                {{ tag.name }}
            </div>
        </div>

        <!-- 子标签列表 -->

        <!-- <div class="sub-tag-list" v-if="currentSubTags.length">
            <template v-for="(subTag, index) in currentSubTags" :key="index">
                <el-dropdown :teleported="false" v-if="subTag.children && subTag.children.length"
                    placement="bottom-start" @command="(childIndex) => handleChildClick(index, childIndex)"
                    class="sub-tag-dropdown">
                    <div class="sub-tag-item has-dropdown" :class="{ active: activeSubIndex === index }"
                        @click="handleSubTagClick(index)">
                        {{ subTag.name }}
                        <el-icon class="dropdown-icon">
                            <ArrowDown />
                        </el-icon>
                    </div>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="activeChildIndex = childIndex"
                                v-for="(child, childIndex) in subTag.children" :key="childIndex" :command="childIndex"
                                :class="{ 'is-active': activeChildIndex === childIndex && activeSubIndex === index }">
                                {{ child.name }}
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
</el-dropdown>

<div v-else class="sub-tag-item" :class="{ active: activeSubIndex === index }" @click="handleSubTagClick(index)">
    {{ subTag.name }}
</div>
</template>
</div> -->
        <div class="sub-tag-list">
            <div v-for="(subTag, index) in currentSubTags" :key="index" class="sub-tag-item"
                :class="{ active: activeSubIndex === index }" @click="handleSubTagClick(index)">
                {{ subTag.name }}
                <div v-if="subTag.children && subTag.children.length">
                    <!-- 按钮组 -->
                    <el-checkbox-group v-model="checkList" :min="0" :max="1" @change="handleCheckChange">
                        <el-checkbox v-for="item in subTag.children" :value="item.value" :label="item.name"
                            :key="item.name">{{
                                item.name
                            }}</el-checkbox>
                    </el-checkbox-group>
                </div>
            </div>
        </div>

    </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, onBeforeUnmount, reactive } from 'vue';

import { ArrowDown } from '@element-plus/icons-vue';

const props = defineProps({
    defaultActive: {
        type: Number,
        default: 0
    },
    defaultSubActive: {
        type: Number,
        default: 0
    },
    defaultChildActive: {
        type: Number,
        default: 0
    },
    tagList: {
        type: Array,
        default: () => []
    },
    checkLists: {
        type: Array,
        default: () => []
    },

});

const emit = defineEmits(['change', 'subChange', 'childChange']);
const checkList = ref([]);
console.log(checkList.value);
// 修改watch的处理方式
watch(() => props.checkLists, (newVal) => {
    checkList.value = newVal;
}, {
    immediate: true,
    deep: true
});

const handleCheckChange = (val) => {
    emit('childChange', checkList.value)
}



// 修改这里：将tagList改为ref，因为是数组类型
const tagList = ref([]);

// 修改watch的处理方式
watch(() => props.tagList, (newVal) => {
    tagList.value = newVal;
}, {
    immediate: true,
    deep: true
});




const activeIndex = ref(props.defaultActive);
const activeSubIndex = ref(props.defaultSubActive);
const activeChildIndex = ref(props.defaultChildActive);
const showThirdLevel = ref(false);

// 计算当前选中主标签对应的子标签列表
const currentSubTags = computed(() => {
    return tagList.value[activeIndex.value]?.subTags || [];
});

// 计算当前选中子标签的子菜单
const currentChildTags = computed(() => {
    if (activeSubIndex.value === null) return [];
    return currentSubTags.value[activeSubIndex.value]?.children || [];
});

// 处理主标签点击
const handleTagClick = (index) => {
    activeIndex.value = index;
    activeSubIndex.value = 0; // 重置子标签选中状态
    // activeChildIndex.value = 0; // 重置三级标签选中状态
    showThirdLevel.value = false;

    emit('change', tagList.value[index]);

    // 如果有子标签，同时触发子标签变化事件
    if (currentSubTags.value.length) {
        emit('subChange', currentSubTags.value[0]);
    }
};

// 处理子标签点击
const handleSubTagClick = (index) => {
    // 如果点击的是有下拉菜单的标签
    if (currentSubTags.value[index].children && currentSubTags.value[index].children.length) {
        // 设置当前选中的子标签，但不自动选中下拉项
        activeSubIndex.value = index;
        // activeChildIndex.value = 0; // 重置但不触发事件
        showThirdLevel.value = false; // 不显示三级内容区域

        emit('subChange', currentSubTags.value[index]);
        // 不触发 childChange 事件，等待用户手动选择下拉项
    } else {
        // 如果点击的是没有下拉菜单的标签
        activeSubIndex.value = index;
        showThirdLevel.value = false;

        emit('subChange', currentSubTags.value[index]);
    }
};

// 处理三级标签点击
const handleChildClick = (subIndex, childIndex) => {
    console.log(subIndex, childIndex)
    activeSubIndex.value = subIndex;
    // activeChildIndex.value = childIndex;
    showThirdLevel.value = true;
    emit('childChange', currentSubTags.value[subIndex].children[childIndex]);
};



// 监听默认值变化
watch(() => props.defaultActive, (newVal) => {
    activeIndex.value = newVal;
});

watch(() => props.defaultSubActive, (newVal) => {
    activeSubIndex.value = newVal;
});

watch(() => props.defaultChildActive, (newVal) => {
    activeChildIndex.value = newVal;
});

// 初始化时触发默认选择事件
onMounted(() => {
    // 触发主标签初始选择事件
    if (tagList.value[activeIndex.value]) {
        emit('change', tagList.value[activeIndex.value]);

        // 如果有子标签，触发子标签初始选择事件
        const currentSubTag = currentSubTags.value[activeSubIndex.value];
        if (currentSubTag) {
            emit('subChange', currentSubTag);

            // 三级标签默认不选中，不触发 childChange 事件
            // 只有当子标签没有下拉菜单时，才算完全选中
            // 有下拉菜单的子标签需要用户主动选择下拉项
        }
    }
});

onBeforeUnmount(() => {
    // 清理逻辑可以在这里添加
});
</script>

<style scoped lang="scss">
.tag-list-container {
    margin-bottom: 20px;
}

.tag-list-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;

    .tag-item {
        padding: 8px 30px;
        border-radius: 6px;
        font-size: 14px;
        cursor: pointer;
        border: 1px solid #e0e0e0;
        background-color: #fff;
        transition: all 0.3s;

        &.active {
            background-color: #49925A;
            color: white;
            border-color: #4CAF50;
        }

        &:hover:not(.active) {
            border-color: #4CAF50;
            color: #4CAF50;
        }
    }
}

.sub-tag-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 10px;

    .sub-tag-item {
        padding: 8px 15px;
        font-size: 14px;
        cursor: pointer;
        position: relative;
        border: 1px solid #e0e0e0;
        border-radius: 10px;

        &.active {
            color: #4CAF50;
            font-weight: 500;

            &::after {
                content: '';
                position: absolute;
                bottom: -10px;
                left: 0;
                width: 100%;
                height: 2px;
            }
        }

        &:hover:not(.active) {
            color: #4CAF50;
        }

        &.has-dropdown {
            display: flex;
            align-items: center;

            .dropdown-icon {
                margin-left: 5px;
                font-size: 12px;
            }
        }
    }

    .sub-tag-dropdown {
        margin-right: 20px;

        .sub-tag-item {
            margin-right: 0;
        }
    }
}



.third-level-content {
    padding: 15px 0;
    min-height: 100px;
}

// Element Plus dropdown 自定义样式
:deep(.el-dropdown-menu__item.is-active) {
    color: #4CAF50;
    font-weight: 500;
}
</style>
